<template>
    <view class="content">
        <view class="header">
            <view class="navbar">
                <u-navbar title-color="#fff" back-icon-color="#ffffff" :is-back="false" :background="background"
                    :back-text-style="{color: '#fff'}" title="热门房间" >
                </u-navbar>
            </view>
            <view class="search">
                <u-search placeholder="请输入房间ID" v-model="roomId" :clearabled="true" :animation="true" 
                action-text="前往" @search="enterRoom(roomId)"></u-search>
            </view>
        </view>
        <view class="hotRoomsList" v-for="item in hotRoomsList" :key="item.room_id" @click="enterRoom(item.room_id)">
            <view class="roomType">
                <u-tag text="普通房" mode="light" type="warning" size="mini" v-if="item.room_type === 0" />
                <u-tag text="点歌房" mode="light" type="warning" size="mini" v-if="item.room_type === 1" />
                <u-tag text="电台房" mode="light" type="warning" size="mini" v-if="item.room_type === 4" />
            </view>
            <view class="roomName">
                {{ item.room_name | handleText }}
            </view>
            <view class="roomOnline">
                {{item.room_online}}人在线
            </view>
            <view class="roomId">
                <u-tag :text="'#'+item.room_id" mode="light" type="info" size="mini" />
            </view>
            <view class="roomNotice">
                {{ item.room_notice | handleText }}
            </view>
            <view class="roomUserName">
                {{urldecode(item.user_name)}}
            </view>
            <image :src="item.user_head" mode="" class="userHead"></image>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                background: {
                    'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(28, 205 ,158))'
                },
                hotRoomsList: [],
                roomId:''
            }
        },
        onLoad() {

        },
        onShow() {
            this.getHotRooms()
        },
        methods: {
            // 解码
            urldecode(str) {
                return decodeURIComponent(str);
            },
            async getHotRooms() {
                const res = await this.$u.api.getHotRooms({})
                this.hotRoomsList = res.data
                console.log(this.hotRoomsList)
            },
            enterRoom(roomId) {
                console.log(roomId)
                uni.navigateTo({
                    url: '../room/room?id=' + roomId
                })
            }
        },
        filters: {
            handleText(value) {
                if (!value) return ''
                if (value.length > 12) {
                    return value.slice(0, 12) + '...'
                }
                return value
            }
        }
    }
</script>

<style>
    page {
        background-color: #e4e7ed;
    }

    .navbar {
        margin-bottom: 20rpx;
    }
    .search {
        margin: 0 auto 20rpx auto;
        width: 95%;
    }
    .hotRoomsList {
        position: relative;
        width: 95%;
        margin: 0 auto 20rpx auto;
        background-color: #fff;
        border-radius: 10rpx;
        height: 220rpx;
    }

    .roomType {
        position: absolute;
        left: 20rpx;
        top: 15rpx;
    }

    .roomName {
        position: absolute;
        left: 140rpx;
        top: 15rpx;
        font-size: 32rpx;
        font-weight: bold;
    }

    .userHead {
        position: absolute;
        width: 100rpx;
        height: 100rpx;
        border-radius: 20rpx;
        left: 20rpx;
        top: 90rpx;
    }

    .roomUserName {
        position: absolute;
        left: 140rpx;
        top: 90rpx;
    }

    .roomNotice {
        position: absolute;
        left: 140rpx;
        top: 150rpx;
        color: #82848a;
    }

    .roomOnline {
        position: absolute;
        right: 20rpx;
        top: 80rpx;
        color: #82848a;
    }

    .roomId {
        position: absolute;
        right: 20rpx;
        top: 15rpx;
    }
</style>
